<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>display:flex和display:inline-flex;对z-index的影响</title>
        <script>!function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);</script>
        <link rel="stylesheet" href="../css/base.css" />
        <link rel="stylesheet" href="../css/common.css" />
        <style>
            .op-5{
                opacity:.5;
            }
            .rotate15{
                transform:rotate(15deg);
            }
            .box { background-color: blue;  }
            .box > img { 
              position: relative; z-index: -1; right: -150px;
            }
        </style>
    </head>
    <body>
        <h1></h1>
        <p><a href="https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/">来源</a></p>
        <h2>box不设置transform:rotate(15deg);</h2>
        <div class="box">
            <img src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
        </div>
        <h2>box设置transform:rotate(15deg);</h2>
        <div class="box rotate15">
            <img src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
        </div>
    </body>
</html>